<template>
    <div class="layout">
        <!-- 通用的页面结构 -->
        <div class="left">
            <!-- 菜单栏 -->
             <el-menu  
             background-color='#000000' text-color='#fff'
             :router="true"
             >
                <!-- 菜单子项 -->
                <el-submenu index="1"  >
                    <!-- 标题 -->
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                    </template>

                    <!-- 标题下子项 -->
                    <el-menu-item  index="1-1" :route="{'path':'/home'}" >
                        新增markdown
                    </el-menu-item>
                    <el-menu-item  index="1-2" :route="{'path':'/markdown'}">
                        markdown列表
                    </el-menu-item>

                </el-submenu>

                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航二</span>
                    </template>
                </el-submenu>

             </el-menu>
        </div>
        <div class="right">
            <!-- 具体路由 -->
            <router-view ></router-view>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .layout{
        width: 100%;
        height: 100%;

        .left,.right {
            float: left;
            height: 100%;
            box-sizing: border-box;
        }
        .left{
            width: 280px;
            background-color:#000000;
            ul{
                width: 100%;
            }
        }
        .right{
            width: calc(100% - 280px);
            padding: 0 15px;
        }
    }
</style>
